<template>
  <div style="padding: 10px">
    <!--头部导航-->
    <div>
      <el-input v-model="name" type="text" placeholder="按照用户名查询" style="width: 180px;margin-right: 10px" clearable>
        <template #prefix>
          <el-icon class="el-input__icon">
            <avatar/>
          </el-icon>
        </template>
      </el-input>
      <el-select v-model="status" placeholder="用户状态" style="margin-right: 10px" clearable>
        <el-option value="0" label="可用">可用</el-option>
        <el-option value="1" label="不可用">不可用</el-option>
      </el-select>
      <el-button type="primary" plain style="width: 100px" @click="findAllByPage">查询</el-button>
      <el-button type="success" plain @click="Add()">新增成员</el-button>
      <el-button type="warning" plain @click="exportPic('imgEchartsAndTable')">导出图片</el-button>
      <el-button type="info" plain @click="userDownLoad()">导出Excel</el-button>
    </div>
    <!--数据表格区-->
    <el-table
        id="imgEchartsAndTable"
        :data="tableData"
        :header-cell-style="{'text-align':'center'}"
        :cell-style="{'text-align':'center'}"
        style="width: 100%;margin: 10px 0;"
        size="small"
        border
        stripe>
      <el-table-column prop="id" label="编号" width="50" :resizable="false"/>
      <el-table-column prop="name" label="姓名" width="130" :resizable="false"/>
      <el-table-column prop="sex" label="性别" :resizable="false"/>
      <el-table-column prop="age" label="年龄" :resizable="false"/>
      <el-table-column prop="userId" label="登录账号" :resizable="false"/>
      <el-table-column prop="identity" label="身份" :resizable="false"/>

      <el-table-column prop="status" label="状态" align="center" :resizable="false">
        <template #default="scope">
          <el-switch
              v-model="scope.row.status"
              :active-value="0"
              :inactive-value="1"
              active-color="#13ce66"
              inactive-color="#ff4949"
              @change="changeStatus(scope.row)"
          ></el-switch>
        </template>
      </el-table-column>

      <el-table-column prop="createTime" label="创建时间" :resizable="false"/>
      <el-table-column label="操作" :resizable="false">
        <template #default="scope">
          <el-button size="mini" @click="handleEdit(scope.row.id)">编辑</el-button>
          <el-popconfirm title="是否要删除该条数据" @confirm="handleDelete(scope.row)">
            <template #reference>
              <el-button type="danger">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <!--分页区域-->
    <div style="margin:10px 0">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[5,10,20]"
          :page-size="pageSize"
          layout="total,sizes,prev,pager,next,jumper"
          :total="total"></el-pagination>
    </div>
    <!--新增区域-->
    <div>
      <el-dialog width="380px" title='添加成员' v-model="AdddialogVisible" :close-on-click-modal="false" center>
        <el-form label-width="80px" :model="userForm">
          <el-form-item label="姓名">
            <el-input v-model="userForm.name" placeholder="请输入姓名"></el-input>
          </el-form-item>
          <el-form-item label="性别">
            <el-radio v-model="userForm.sex" label="男" size="large">男</el-radio>
            <el-radio v-model="userForm.sex" label="女" size="large">女</el-radio>
          </el-form-item>
          <el-form-item label="年龄">
            <el-input v-model="userForm.age" placeholder="请输入年龄"></el-input>
          </el-form-item>
          <el-form-item label="登录账号">
            <el-input v-model="userForm.userId" placeholder="请输入账号"></el-input>
          </el-form-item>
          <el-form-item label="密码">
            <el-input type="password" v-model="userForm.password" placeholder="请输入密码"></el-input>
          </el-form-item>
          <el-form-item label="身份">
            <el-input type="text" v-model="userForm.identity" placeholder="请输入身份标签"></el-input>
          </el-form-item>
        </el-form>
        <template #footer>
        <span class="dialog-footer">
          <el-button @click="AdddialogVisible = false">取消</el-button>
          <el-button @click="onAdd">添加</el-button>
        </span>
        </template>

      </el-dialog>
    </div>

    <!--编辑区域-->
    <div>
      <el-dialog width="380px" title="修改成员" v-model="EditdialogVisible" :close-on-click-modal="false" center>
        <el-form label-width="80px" :model="userForm">
          <el-form-item label="编号">
            <el-input v-model="userForm.id" placeholder="编号无法修改" disabled="disabled"/>
          </el-form-item>
          <el-form-item label="姓名">
            <el-input v-model="userForm.name" placeholder="修改名称"/>
          </el-form-item>
          <el-form-item label="性别">
            <el-radio v-model="userForm.sex" label="男">男</el-radio>
            <el-radio v-model="userForm.sex" label="女">女</el-radio>
          </el-form-item>
          <el-form-item label="年龄">
            <el-input v-model="userForm.age" placeholder="修改年龄"/>
          </el-form-item>
          <el-form-item label="登录账号">
            <el-input v-model="userForm.userId" placeholder="登录账号无法修改" disabled="disabled"/>
          </el-form-item>
          <el-form-item label="身份">
            <el-input v-model="userForm.identity" placeholder="修改身份标签"/>
          </el-form-item>
          <el-form-item label="创建时间">
            <el-date-picker
                v-model="userForm.createTime"
                type="datetime"
                placeholder="选择日期"
                value-format="YYYY-MM-DD HH:mm:ss">
            </el-date-picker>
          </el-form-item>
        </el-form>
        <template #footer>
        <span class="dialog-footer">
          <el-button @click="EditdialogVisible = false">取消</el-button>
          <el-button @click="onEdit">修改</el-button>
        </span>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import avatar from "@element-plus/icons-vue/dist/es/avatar.mjs";
import request from "../../utils/request";
import html2canvas from "html2canvas";
import userApi from "../../api/user"
import axios from "axios";

export default {
  name: "FamilyMember",
  components: {
    avatar
  },
  data() {
    return {
      pageNum: 1,
      //一页显示的条数
      pageSize: 10,
      //总条数
      total: 0,
      //用户姓名搜索
      name: '',
      //是否可用
      status: '',
      //表格数据
      tableData: [],
      //表单
      userForm: {},
      //添加弹窗默认关闭
      AdddialogVisible: false,
      //修改弹窗默认关闭
      EditdialogVisible: false,
    }
  },
  created() {
    this.findAllByPage();
  },
  methods: {
    //改变滑块事件
    changeStatus(row) {
      //获取列里面的id
      let id = row.id
      //拿到启用或者停用
      let text = row.status === 0 ? "启用" : "停用";
      this.$confirm('确认要"' + text + '""' + row.name + '"用户吗？', "系统提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: 'warning'
      }).then(() => {
        userApi.updateUserStatus(id, row.status).then(res => {
          if (res.data.code === "0") {
            this.$message({
              type: "success",
              message: text + "成功!"
            })
          } else {
            this.$message({
              type: "error",
              message: res.data.msg
            });
          }
          this.findAllByPage()
        });
      }).catch(() => {
        this.$message.info("取消更新")
      });
      this.findAllByPage()
    },
    //查询所有的拥护
    findAllByPage() {
      request.get("/user/findAllByPage", {
        params: {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          name: this.name,
          status: this.status
        }
      }).then(res => {
        //数据赋值给表格
        this.tableData = res.data.records
        //赋值总条数
        this.total = res.data.total;
      })
    },
    //导出图片
    exportPic(DivID) {
      html2canvas(document.querySelector("#" + DivID)).then(canvas => {
        let dataURL = canvas.toDataURL("image/png");
        if (dataURL !== "") {
          var a = document.createElement('a')
          a.download = "成员详情";
          a.href = dataURL;
          a.click()
        }
      })
    },
    //改变当前每页的个数触发
    handleSizeChange(pageSize) {
      this.pageSize = pageSize;
      this.findAllByPage()
    },
    //改变当前页码触发
    handleCurrentChange(pageNum) {
      this.pageNum = pageNum;
      this.findAllByPage()
    },

    //点击添加
    Add() {
      //打开添加弹窗
      this.AdddialogVisible = true;
      //清空表单
      this.userForm = {}
    },
    //添加数据
    onAdd() {
      request.post("/user/addUser", this.userForm).then(res => {
        if (res.code === "0") {
          this.$message({
            type: "success",
            message: res.msg
          })
        } else {
          this.$message({
            type: "error",
            message: res.msg
          })
        }
        //刷新表格
        this.findAllByPage()
        //关闭弹窗
        this.AdddialogVisible = false
      });
    },
    //按照id删除成员
    handleDelete(row) {
      request.post("/user/delUserById", row).then(res => {
        if (res.code === "0") {
          this.$message({
            type: "success",
            message: res.msg
          })
        } else {
          this.$message({
            type: "error",
            message: res.msg
          })
        }
        //刷新数据表格
        this.findAllByPage()
      });
    },
    //打开修改弹窗并查询对应数据
    handleEdit(id){
      this.EditdialogVisible = true;
      request.get("/user/findUserById/"+id).then(res=>{
        if(res!=null){
          this.userForm = res
        }
      });
    },
    //修改数据
    onEdit(){
      request.post("/user/editUser",this.userForm).then(res=>{
        if(res.code==="0"){
          this.$message({
            type: "success",
            message: res.msg
          })
        }else{
          this.$message({
            type: "error",
            message: res.msg
          })
        }
        //刷新数据表格
        this.findAllByPage()
        //关闭修改弹窗
        this.EditdialogVisible = false;
      });
    },
    //导出excel
    userDownLoad(){
      userApi.userDownLoad().then(res=>{
        // debugger
        // let blob = new Blob([res], { type: 'application/xlsx' })
        // let url = window.URL.createObjectURL(blob)
        const link = document.createElement('a') // 创建a标签
        link.href = "/api/user/userDownLoad"
       // link.download = '用户信息.xlsx' // 重命名文件
        link.click()
        URL.revokeObjectURL(link)
      });
    },
  }
}
</script>

<style scoped>

</style>